<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<div class="mod-lswms__orders">
						<el-form :inline="true" :model="dataForm" @keyup.enter.native="getPicklistFn()">
							<el-row>
								<el-col :span="4">
								<el-form-item>
									<el-input v-model="dataForm.tray" size="small" placeholder="箱号" clearable></el-input>
								</el-form-item>
								</el-col>
								<el-col :span="2">
								<el-form-item>
									<el-button size="small" @click="getTransferFn()">查询</el-button>
								</el-form-item>
							</el-col>
							<el-col :span="2">
								<el-form-item>
									<el-button size="small" type="primary" @click="saveTransferFn()">执行箱转移</el-button>
								</el-form-item>
								</el-col>
							</el-row>
						</el-form>

						<el-table v-loading="dataListLoading" :data="inventoryDataList" border style="width: 100%;"  height="720" >
							<el-table-column prop="sku" label="物料编码" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="descr" label="物料名称" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="factorycdoe" label="计量编码/工装号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="location" label="库位编码" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="tray" label="箱" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="boxstr" label="格" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot" label="批号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="qty" label="数量" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="pickqty" label="分配量" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="putqty" label="待上架量" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="status" label="状态" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="totray" label="目的箱" header-align="center" align="center">
								<template #default="scope">
									<el-input v-model="scope.row.totray"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="tobox" label="目的格" header-align="center" align="center">
								<template #default="scope">
									<!-- <el-input v-model="scope.row.tobox" ></el-input> -->
									<!-- <el-select v-model="scope.row.tobox" placeholder="请选择">
										<el-option value="" label="--"></el-option>
										<el-option v-for="item in boxs" :key="item.list" :label="item.listname"
											:value="item.list">
										</el-option>
									</el-select> -->
									<select v-model="scope.row.tobox" >
									  <option v-for="item in boxs" v-bind:value="item.list">
									    {{ item.listname }}
									  </option>
									</select>
								</template>
							</el-table-column>
							<el-table-column prop="toqty" label="转移数量" header-align="center" align="center">
								<template #default="scope">
									<el-input v-model="scope.row.toqty"></el-input>
								</template>
							</el-table-column>
							<!-- <el-table-column prop="remark" label="备注" header-align="center" align="center"> </el-table-column> -->
							<el-table-column prop="uniquecodes" label="唯一码" header-align="center"
								align="center">
								<template #default="scope">
									<el-button @click="showDialog(scope.row)" v-if="scope.row.isuniquecode==1"  v-bind:disabled="scope.row.status>=13" > 录入唯一码</el-button>
								</template>
							</el-table-column>
						
							<!-- <el-table-column prop="adduser" label="创建人" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="addtime" label="创建时间" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="updatuser" label="更新人" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="updatetime" label="更新时间" header-align="center" align="center">
									</el-table-column> -->
						</el-table>


						<!-- <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
							layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
							@current-change="pageCurrentChangeHandle">
						</el-pagination> -->
						<!-- 弹窗, 新增 / 修改 -->
						<!-- <ordersAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList">
						</ordersAddOrUpdate> -->
						<!-- 明细 -->
						<!-- <orderdetail v-if="orderdetailVisible" ref="orderdetailvue"></orderdetail> -->
					</div>
				</el-card>
				
				<el-dialog v-model="dialogFormVisible" ref="dalogRef">
					<el-form :v-model="formdata">
						<el-form-item label="唯一码">
							<el-input v-model="formdata.uniquecodes" placeholder="唯一码" type="textarea" rows="5"
									  size="small" @change="duplicateRemoval">
							</el-input>
						</el-form-item>
					</el-form>
					<template #footer>
						<span class="dialog-footer">
							<el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
							<el-button size="small" type="primary" @click="subClick">确 定</el-button>
						</span>
					</template>
				</el-dialog>
				
			</div>
		</div>
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';

	import {
		getPicklist,
		savePicklist,
		backToStereo,
	} from '@/network/lswms/orders/Orderdetaillist'

	import {
		getInventoryListByData,
		transferTray
	} from '@/network/lswms/stock/Inventory'
	import {
		getCodeListByCode,
	} from "@/network/lswms/base/Codelist.js"
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	export default {
		name: "TransferTray",

		setup(props) {
			const dataForm = ref({
				tray: ''
			})

			const activeName = ref('first')

			const dataList = ref(null)

			const inventoryDataList = ref(null)

			const dataListLoading = ref(false)

			const getTransferFn = () => {
				if (dataForm.value.tray.trim() == '' || dataForm.value.tray == null || dataForm.value.tray.trim()
					.length == 0) {
					return ElMessage.error("请录入箱号");
				}

				getInventoryListByData({
					tray: dataForm.value.tray
				}).then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					inventoryDataList.value = res.data;

				})
				boxsFn();

			}

			const buttonDisable = computed((data) => {
				if (data < 5) {
					return false
				} else {
					return true
				}
			})

			const boxs = ref("");

			const boxsFn = () => {

				getCodeListByCode('BOXLIST').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					boxs.value = res.data;
				}).catch((err) => {});
			}

			const formdata = ref({
				name: '',
				name2: '',
				uniquecodes: ''
			})

			const dialogFormVisible = ref(false);
			const showDialog = (row) => {

				dialogFormVisible.value = true;
				formdata.value = row;
			}
			const subClick = () => {
				dialogFormVisible.value = false;
			}

			const duplicateRemoval=()=>{
				let uniquecodes = formdata.value.uniquecodes.split('\n')
				let newArr =Array.from(new Set(uniquecodes));
					
				if(newArr.length>0){
					formdata.value.uniquecodes = newArr.join("\n") ;
				}else{
					formdata.value.uniquecodes= [];
				}
			}


			const saveTransferFn = () => {
				if (dataForm.value.tray.trim() == '' || dataForm.value.tray == null || dataForm.value.tray.trim()
					.length == 0) {
					return ElMessage.error("请录入箱号");
				}
				ElMessageBox.confirm('确定要转移箱吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					let data = inventoryDataList.value;
					transferTray(data).then((res) => {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getTransferFn();
							}
						});

					})
				}).catch(function() {})

			}

			return {
				activeName,
				dataForm,
				dataList,
				inventoryDataList,
				dataListLoading,
				saveTransferFn,
				getTransferFn,
				buttonDisable,
				boxs,
				dialogFormVisible,
				showDialog,
				subClick,
				duplicateRemoval,
				formdata
			}
		},
		// methods:{
		// 	hasPermission
		// }
	}
</script>

<style>
</style>
